<template>
    <div class="preBody row">
        <div class="col-xs-10 col-sm-10 col-md-10">
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-md-8">
                    <img
                        src="../../../static/images/scenery_1.jpg"
                        width="100%"
                        alt
                        class="thumbnail"
                    />
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4">
                    <img
                        src="../../../static/images/scenery_2.jpg"
                        width="100%"
                        alt
                        class="thumbnail"
                    />
                    <img
                        src="../../../static/images/scenery_3.jpg"
                        width="100%"
                        alt
                        class="thumbnail"
                    />
                </div>
                <router-link to style="position: absolute;right: 30px;top:0px;" id="a">
                    更多图片
                    <i class="el-icon-d-arrow-right"></i>
                </router-link>
            </div>
            <div id="b">
                <h2>概况</h2>
                <el-divider></el-divider>
            </div>
            <div style="margin-bottom: 10px;">
                <div style="display: flex;" id="c">
                    <el-rate
                        v-model="value"
                        disabled
                        show-score
                        text-color="#ff9900"
                        style="margin:10px;"
                    ></el-rate>
                    <div style="margin:10px;">
                        <span style="color: #ff9100;">{{qq}}</span>条点评
                    </div>
                    <el-button type="text" icon="el-icon-edit" @click="score" size="small">点击参与评分</el-button>
                </div>
                <div id="d" class="divbox">
                    <span class="label label-danger">特色</span>
                    <div>中国现存最大的古典皇家园林，面积是颐和园的两倍。 看气派的皇家建筑，还有仿江南园林的湖区。 “烟雨楼”是电视剧《还珠格格》里“漱芳斋”的取景地。</div>
                </div>
                <div id="e" class="divbox">
                    <span class="label label-danger">景点信息</span>
                    <div class="panel-body">
                        <p>地址：承德市双桥区丽正门路20号</p>
                        <p>等 级：AAAAA</p>
                        <p>电 话：0314-2161132</p>
                        <p>开放时间：08:00-22:00 (1月1日-12月31日 周一至周日)</p>
                    </div>
                </div>
                <div id="f" class="divbox">
                    <span class="label label-danger">景点介绍</span>
                    <div class="panel-body">
                        <p>
                            &emsp;&emsp;避暑山庄始建于1703年，历经清朝康熙、雍正、乾隆三朝，耗时89年建成，是清政府与外国使者、边疆少数民族会晤场所，也是除了北京以外清朝的第二个政治中心。它体现了清政府在外交政策上“软”的一面，外来使者不用长途进京也能与清政府交流，把复杂的政治目的化为幽静园林中的一团和气。
                            山庄分四大区域，南边是宫殿区和湖区，北边是山区和平原区，其中宫殿区和湖区是避暑山庄的精华所在。
                        </p>
                        <p>宫殿区：</p>
                        <p>&emsp;&emsp;避暑山庄正门（位于丽正门大街上）一进去，就能看到宫殿区，所以一般最先游览宫殿区。</p>
                        <p>&emsp;&emsp;因为避暑山庄是清政府与外会晤的地方，以接待外宾的礼仪来建造山庄，所以规格极高，相当于故宫的规格，同时为了在外宾面前展现中华民族传统美德谦逊、节俭的一面，宫殿区在整体布局上显得古朴、大方，但是在建筑用材上又很名贵，主殿澹泊敬诚殿全部用楠木造成，标准的“低调的奢华”，在设计上可谓“煞费苦心”。</p>
                        <p>&emsp;&emsp;从挂有“避暑山庄博物馆”牌匾的门进入，宫殿区的游览就开始了，依次看过挂着康熙御笔“避暑山庄”四字牌匾的阅射门、主殿澹泊敬诚殿、死过嘉庆、咸丰两任皇帝的烟波致爽殿等，大概最多2个小时能游览完宫殿区。从后门出，下一个坡，就到了去山区游览的环山车上车点。</p>
                        <p>山区：</p>
                        <p>&emsp;&emsp;如果时间足够，宫殿区游览完顺路坐环山车游览山区，时间有限的话，可以放弃山区直奔湖区。</p>
                        <p>&emsp;&emsp;山区占了避暑山庄面积的五分之四，富家大户造园林，弄几座小假山点缀多得是，真正把莽莽群山圈进来的，却闻所未闻，康熙在造避暑山庄时的深意，大概是叫后世子孙不要忘记自己的民族来自遥远的群山之外，也不要忘记群山之外虎视眈眈瞧着自己版图的外族。</p>
                        <p>&emsp;&emsp;一路坐环山车会经过不少景点，但是只能在车上看看，会放游客下来游览的只有“四面云山”，“二马道”，“青枫绿屿”三站。三站中比较有意思的是“二马道”，站在避暑山庄的围墙上，可以看到外八庙（为与清朝会晤的少数民族建立的宗教场所）中的普陀宗乘之庙（俗称“小布达拉宫”）和普宁寺，小布达拉宫的金顶在阳光下闪闪发光，尤为显眼。环山车到了“芳园居”那便是终点站了，芳园居就在如意湖西岸，下车后可以直接游览湖区。</p>
                        <p>湖区：</p>
                        <p>&emsp;&emsp;在北方之所以会有避暑山庄这样湖面上的亭台楼阁，源于康熙、乾隆两位皇帝对于江南景色的喜爱，湖区虽仿江南建筑与水相结合的特点，却又比江南的小桥流水大气得多。山庄共有“康乾72景”——康熙题字36景，乾隆题字36景。要想把72景集全其实不太可能，有些景很小，走走不注意就错过了。72景中却有31景在湖区，游览湖区相当于游览72景的“浓缩版”。其中烟雨楼是必去的，模仿嘉兴南湖的烟雨楼而建，是电视剧《还珠格格》的拍摄地之一。在湖区还可以坐一坐脚踏船，泛舟湖上，参考价50元/小时。</p>
                        <p>平原区：</p>
                        <p>&emsp;&emsp;位于山区和湖区之间，从湖区贴着山庄的东边往北走即到。平原区的西部是草原，以皇帝举行赛马活动的试马埭为主体；东部是林地，称万树园，园中有不同规格的28座蒙古包。平原区还有曾藏《四库全书》的皇家藏书阁文津阁，永佑寺、春好轩、宿云檐等建筑。</p>
                        <p>&emsp;&emsp;如果你对清朝历史特别感兴趣并且有点研究，山庄中众多碑刻值得细细玩味。避暑山庄的建造者不会想到，百年后这里会成为旅游胜地，碑刻上咬文嚼字的固然有，可更多的是给自家人说的体己话。比如乾隆曾在内松云峡的同一座石碑上先后作下六首诗表达自己功成名就后想要做一只闲云野鹤的愿望，他的儿子嘉庆读后只能默默地在边上的碑刻上表示：父亲的诗真是深奥，我感到压力山大（瞻题蕴精奥，守位重仔肩）！</p>
                        <p>&emsp;&emsp;避暑山庄周边有普陀宗乘之庙（俗称“小布达拉宫”）、普宁寺、磐锤峰景区，可一并游览。</p>
                        <p>&emsp;&emsp;山庄内没有什么吃饭的地方，建议游览时间长、喜欢慢慢看的游客自备些干粮。不过山庄外特色餐饮小店不少，出山庄后可以去尝尝承德的特色菜，有羊汤、烙糕、鲜花玫瑰饼、南沙饼、御土荷叶鸡等。</p>
                    </div>
                </div>
                <div id="g" class="divbox">
                    <span class="label label-danger">特别提示</span>
                    <div class="panel-body">
                        <p>1. 避暑山庄每年的11月份到次年5月份是防火封山的季节，所以这个时间来你就上不了山区。</p>
                        <p>2. 山庄内的荷花极负盛名，7、8月荷花满池塘，一直开到9月末。与其他地域的荷花不同，山庄荷花开得早，败得晚，花期很长。</p>
                        <p>3. 每年六月，山庄内有“九龙醉杯”龙舟大赛。</p>
                        <p>4. 游览避暑山庄强烈建议请导游，或至少蹭听。不但能增长很多人文历史知识，也能听到各种有趣传说，为美景增色不少，有些景点位置较为偏僻或乍看不引人注目，有人指点才不会错过。请一个导游的参考价是100元。</p>
                        <p>5. 山庄中散养着不少梅花鹿，游览时经常能看见它们。</p>
                    </div>
                </div>
            </div>
            <!-- <div>
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-primary" id="f">
                        <div class="panel-heading" role="tab" id="headingOne">
                            <h4 class="panel-title">
                                <a
                                    role="button"
                                    data-toggle="collapse"
                                    data-parent="#accordion"
                                    href="#collapseOne"
                                    aria-expanded="true"
                                    aria-controls="collapseOne"
                                >景点介绍</a>
                            </h4>
                        </div>
                        <div
                            id="collapseOne"
                            class="panel-collapse collapse in"
                            role="tabpanel"
                            aria-labelledby="headingOne"
                        >
                            <div class="panel-body">
                                <p>
                                    &emsp;&emsp;避暑山庄始建于1703年，历经清朝康熙、雍正、乾隆三朝，耗时89年建成，是清政府与外国使者、边疆少数民族会晤场所，也是除了北京以外清朝的第二个政治中心。它体现了清政府在外交政策上“软”的一面，外来使者不用长途进京也能与清政府交流，把复杂的政治目的化为幽静园林中的一团和气。
                                    山庄分四大区域，南边是宫殿区和湖区，北边是山区和平原区，其中宫殿区和湖区是避暑山庄的精华所在。
                                </p>
                                <p>宫殿区：</p>
                                <p>&emsp;&emsp;避暑山庄正门（位于丽正门大街上）一进去，就能看到宫殿区，所以一般最先游览宫殿区。</p>
                                <p>&emsp;&emsp;因为避暑山庄是清政府与外会晤的地方，以接待外宾的礼仪来建造山庄，所以规格极高，相当于故宫的规格，同时为了在外宾面前展现中华民族传统美德谦逊、节俭的一面，宫殿区在整体布局上显得古朴、大方，但是在建筑用材上又很名贵，主殿澹泊敬诚殿全部用楠木造成，标准的“低调的奢华”，在设计上可谓“煞费苦心”。</p>
                                <p>&emsp;&emsp;从挂有“避暑山庄博物馆”牌匾的门进入，宫殿区的游览就开始了，依次看过挂着康熙御笔“避暑山庄”四字牌匾的阅射门、主殿澹泊敬诚殿、死过嘉庆、咸丰两任皇帝的烟波致爽殿等，大概最多2个小时能游览完宫殿区。从后门出，下一个坡，就到了去山区游览的环山车上车点。</p>
                                <p>山区：</p>
                                <p>&emsp;&emsp;如果时间足够，宫殿区游览完顺路坐环山车游览山区，时间有限的话，可以放弃山区直奔湖区。</p>
                                <p>&emsp;&emsp;山区占了避暑山庄面积的五分之四，富家大户造园林，弄几座小假山点缀多得是，真正把莽莽群山圈进来的，却闻所未闻，康熙在造避暑山庄时的深意，大概是叫后世子孙不要忘记自己的民族来自遥远的群山之外，也不要忘记群山之外虎视眈眈瞧着自己版图的外族。</p>
                                <p>&emsp;&emsp;一路坐环山车会经过不少景点，但是只能在车上看看，会放游客下来游览的只有“四面云山”，“二马道”，“青枫绿屿”三站。三站中比较有意思的是“二马道”，站在避暑山庄的围墙上，可以看到外八庙（为与清朝会晤的少数民族建立的宗教场所）中的普陀宗乘之庙（俗称“小布达拉宫”）和普宁寺，小布达拉宫的金顶在阳光下闪闪发光，尤为显眼。环山车到了“芳园居”那便是终点站了，芳园居就在如意湖西岸，下车后可以直接游览湖区。</p>
                                <p>湖区：</p>
                                <p>&emsp;&emsp;在北方之所以会有避暑山庄这样湖面上的亭台楼阁，源于康熙、乾隆两位皇帝对于江南景色的喜爱，湖区虽仿江南建筑与水相结合的特点，却又比江南的小桥流水大气得多。山庄共有“康乾72景”——康熙题字36景，乾隆题字36景。要想把72景集全其实不太可能，有些景很小，走走不注意就错过了。72景中却有31景在湖区，游览湖区相当于游览72景的“浓缩版”。其中烟雨楼是必去的，模仿嘉兴南湖的烟雨楼而建，是电视剧《还珠格格》的拍摄地之一。在湖区还可以坐一坐脚踏船，泛舟湖上，参考价50元/小时。</p>
                                <p>平原区：</p>
                                <p>&emsp;&emsp;位于山区和湖区之间，从湖区贴着山庄的东边往北走即到。平原区的西部是草原，以皇帝举行赛马活动的试马埭为主体；东部是林地，称万树园，园中有不同规格的28座蒙古包。平原区还有曾藏《四库全书》的皇家藏书阁文津阁，永佑寺、春好轩、宿云檐等建筑。</p>
                                <p>&emsp;&emsp;如果你对清朝历史特别感兴趣并且有点研究，山庄中众多碑刻值得细细玩味。避暑山庄的建造者不会想到，百年后这里会成为旅游胜地，碑刻上咬文嚼字的固然有，可更多的是给自家人说的体己话。比如乾隆曾在内松云峡的同一座石碑上先后作下六首诗表达自己功成名就后想要做一只闲云野鹤的愿望，他的儿子嘉庆读后只能默默地在边上的碑刻上表示：父亲的诗真是深奥，我感到压力山大（瞻题蕴精奥，守位重仔肩）！</p>
                                <p>&emsp;&emsp;避暑山庄周边有普陀宗乘之庙（俗称“小布达拉宫”）、普宁寺、磐锤峰景区，可一并游览。</p>
                                <p>&emsp;&emsp;山庄内没有什么吃饭的地方，建议游览时间长、喜欢慢慢看的游客自备些干粮。不过山庄外特色餐饮小店不少，出山庄后可以去尝尝承德的特色菜，有羊汤、烙糕、鲜花玫瑰饼、南沙饼、御土荷叶鸡等。</p>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-primary" id="g">
                        <div class="panel-heading" role="tab" id="headingTwo">
                            <h4 class="panel-title">
                                <a
                                    class="collapsed"
                                    role="button"
                                    data-toggle="collapse"
                                    data-parent="#accordion"
                                    href="#collapseTwo"
                                    aria-expanded="false"
                                    aria-controls="collapseTwo"
                                >特别提示</a>
                            </h4>
                        </div>
                        <div
                            id="collapseTwo"
                            class="panel-collapse collapse"
                            role="tabpanel"
                            aria-labelledby="headingTwo"
                        >
                            <div class="panel-body">
                                <p>1. 避暑山庄每年的11月份到次年5月份是防火封山的季节，所以这个时间来你就上不了山区。</p>
                                <p>2. 山庄内的荷花极负盛名，7、8月荷花满池塘，一直开到9月末。与其他地域的荷花不同，山庄荷花开得早，败得晚，花期很长。</p>
                                <p>3. 每年六月，山庄内有“九龙醉杯”龙舟大赛。</p>
                                <p>4. 游览避暑山庄强烈建议请导游，或至少蹭听。不但能增长很多人文历史知识，也能听到各种有趣传说，为美景增色不少，有些景点位置较为偏僻或乍看不引人注目，有人指点才不会错过。请一个导游的参考价是100元。</p>
                                <p>5. 山庄中散养着不少梅花鹿，游览时经常能看见它们。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>-->
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 molu">
            <div>目录</div>
            <div @click="gotoA('a')">
                <i class="el-icon-picture" /> 图片
            </div>
            <div @click="gotoA('b')">
                <i class="el-icon-more" /> 概况
            </div>
            <div @click="gotoA('c')">
                <i class="el-icon-star-on" /> 评分
            </div>
            <div @click="gotoA('d')">
                <i class="el-icon-s-flag" /> 特色
            </div>
            <div @click="gotoA('e')">
                <i class="el-icon-info" /> 景点信息
            </div>
            <div @click="gotoA('f')">
                <i class="el-icon-s-order" /> 景点介绍
            </div>
            <div @click="gotoA('g')">
                <i class="el-icon-warning" /> 特别提示
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            value: 4.3, //评分
            qq: "8496",
            // actIndex: 0
        };
    },
    methods: {
        score() {
            this.$router.push({
                path: "/scenery/score",
                query: {
                    name: "承德避暑山庄"
                }
            });
        },
        gotoA(place, event) {
            console.log(event);
            document.getElementById(place).scrollIntoView();
        },
        // scrollAct() {}
    },
    mounted() {
        // console.log(this.$route.query);
        // if (this.$route.query.status == "200") {
        //     this.$message({
        //         message: "评论成功",
        //         type: "success"
        //     });
        // }
        // window.addEventListener("scroll", this.scrollAct);
    }
};
</script>
<style>
div.preBody > div:first-child {
    /* margin: 5px; */
    margin-bottom: 10px;
    padding: 20px 30px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
}
div.preBody img.thumbnail {
    margin-bottom: 10px;
}

div.preBody div.divbox {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin-top: 10px;
    background: rgba(64, 158, 255, 0.3);
    overflow: hidden;
}
/* 目录 */
div.preBody div.molu {
    position: sticky;
    top: 0;
}
div.preBody div.molu > div:first-child {
    color: rgb(64, 158, 255);
    font-weight: 800;
    font-size: 22px;
}
div.preBody div.molu > div {
    padding: 10px 5px;
    font-size: 17px;
}
div.preBody div.molu > div:hover {
    color: rgb(64, 158, 255);
    font-weight: 800;
    cursor: pointer;
}
div.act {
    color: rgb(64, 158, 255);
    font-weight: 800;
}
/*  */
</style>